<template>
	<div>
		<div class="bg-back">
			<ul class="shadows">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<ul class="drive">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<div style="z-index: 98;position: absolute;top: 0;left:calc(50% - 244px);" class="cd-user-modal is-visible">
			<!-- this is the entire modal form, including the background -->
			<div class="cd-user-modal-container">
				<ul class="cd-switcher">
					<li class="point"><a :class="[loginType == 'login' ?'selected':'']" @click="loginType = 'login'">账号密码登录</a>
					</li>
					<li class="point"><a :class="[loginType == 'register' ?'selected':'']"
							@click="loginType = 'register'">账号注册</a></li>
				</ul>
				<div id="cd-login" class="is-visible is-selected" v-if="loginType == 'login'">
					<!-- log in form -->
					<form class="cd-form ">
						<p class="fieldset">
							<label class="image-replace cd-username" for="signup-username">账户名</label>
							<input class="full-width has-padding has-border" id="signin-email" type="phone" v-model="params.phoneNum"
								placeholder="请输入账户名" style="width: 80%;">
							<span class="cd-error-message">账户名错误</span>
						</p>
						<p class="fieldset">
							<label class="image-replace cd-password" for="signup-password">密码</label>
							<input class="full-width has-padding has-border" id="signup-password" placeholder="请输入密码"
								v-model="params.password" style="width: 80%;" type="password" />
							<span class="cd-error-message">格式错误!</span>
						</p>
						<p class="fieldset" style="display: flex;align-items: center;">
							<input type="checkbox" id="remember-me" checked>
							<label for="remember-me" style="margin-left: 5px;">记住密码</label>
						</p>
						<div class="fieldset">
							<el-button class="full-width" @click="login" long style="width: 100%;" type="success" :loading="loading">
								登录
							</el-button>
						</div>
					</form>
				</div> <!-- cd-login -->
				<div id="cd-login" class="is-visible is-selected" v-if="loginType == 'register'">
					<!-- sign up form -->
					<form class="cd-form">
						<p class="fieldset">
							<label class="image-replace cd-username" for="signup-username">用户名</label>
							<input class="full-width has-padding has-border" id="signup-username" type="text" placeholder="请输入手机号"
								v-model="params.phoneNum" style="width: 80%;">
							<span class="cd-error-message">格式错误!</span>
						</p>

						<p class="fieldset">
							<label class="image-replace cd-password">验证码</label>
							<input class="full-width has-padding has-border" type="text" placeholder="验证码" v-model="params.code"
								style="width: 80%;">
						<div class="hide-password" @click="sendCode">{{codeText}}</div>
						<!-- <span class="cd-error-message">密码错误</span> -->
						</p>
						<p class="fieldset">
							<el-button class="full-width" long style="width: 100%;" type="primary" @click="register">
								注册
							</el-button>
						</p>
					</form>
				</div>
			</div>
		</div>

		<el-dialog :visible.async="show" :zIndex="999" @close="show = false">
			<bindUser :phoneNum="params.phoneNum"></bindUser>
		</el-dialog>
	</div>

</template>

<script>
	import {
		Session
	} from '@/utils/storage';
	import {
		PrevLoading
	} from '@/utils/loading.js';
	import bindUser from '@/components/user/bindUser'
	import FWRSAHelper from "../../utils/RSA.js"
	let that
	export default {
		components: {
			bindUser
		},
		name: '',
		data() {
			return {
				loginType: "login",
				params: {
					phoneNum: '',
					password: ''
				},
				show: false,
				codeText: "发送验证码",
				loading: false,
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			console.log("ssss")
		},
		methods: {
			login() {
				//console.log("ssss")
				if (that.params.phoneNum && that.params.password) {
					that.loading = true

					setTimeout(function() {
						that.loading = false
					}, 1000)
					that.ajax({
						url: '/userLogin/login',
						data: {
							"phoneNum": that.params.phoneNum,
							"password": FWRSAHelper.FWRSAHelper.encrypt(that.params.password)
						},
						success: function(result) {
							console.log(result)
							that.loading = false
							if (result.status == 1) {
								let thisUser = result.data.user
								thisUser.nickName = thisUser.userName
								thisUser.userName = 'admin'
								thisUser.roles = ['admin'];
								thisUser.authBtnList = ['btn.add', 'btn.del', 'btn.edit', 'btn.link'];
								let userInfo = JSON.stringify(result.data.user)

								if (result.data && result.data.user) localStorage.setItem("user", userInfo)

								// 存储 token 到浏览器缓存
								Session.set('token', result.data.ticketId)
								// 存储用户信息到浏览器缓存
								Session.set('userInfo', thisUser);
								// 存储用户信息到vuex
								that.$store.dispatch('userInfos/setUserInfos', thisUser);
								that.$store.commit('setToken', result.data.ticketId);
								PrevLoading.start();
								that.$router.push('/');

							} else {
								that.$message.error(result.data.msgInfo[0].errorContent);
							}
						},
						error: function(result) {
							console.log(result)
						}
					})
				} else {
					that.$message.error('请填写完整');
				}
			},

			register(canNext) {
				if (!that.params.phoneNum) return that.$message.error('手机号不能为空');
				if (!that.params.code) return that.$message.error('验证码不能为空');

				var param = {};
				var url = '';
				that.ajax({
					url: '/userRegister/checkIdentifyCode',
					data: {
						phoneNum: that.params.phoneNum,
						identifyCode: that.params.code
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						if (result.data) {
							that.show = true
						} else {
							return that.$message.error('验证错误');
						}
					}
				});
			},

			sendCode() {
				if (this.codeText != "发送验证码") return;
				if (!this.params.phoneNum) return that.$message.error('请填写手机号');

				that.sendCodeAjax();
			},


			checkPhoneNumExist() {
				that.ajax({
					url: '/userRegister/isPhoneNumExist.htm',
					data: {
						phoneNum: this.params.phoneNum
					},
					contentType: 'application/x-www-form-urlencoded',
					success: (res) => {
						console.log(res.data);

						if (!res.data.isRegistered) {
							return that.$message.error('您的手机号码还未注册，你可以先去注册');
						} else {
							that.sendCodeAjax();
						}
					},
					fail: function(res) {},
					complete: function(res) {}
				});
			},

			sendCodeAjax() {
				that.ajax({
					url: '/userRegister/getSmsIdentifyCode.htm',
					data: {
						phoneNum: this.params.phoneNum,
						smsType: '3',
						smsOrigin: 'MINIPROGRAME'
					},
					contentType: 'application/x-www-form-urlencoded',
					success: (res) => {
						console.log(res.data);

						if (res.status == 1) {
							this.changeSecond();
						}
					},
					fail: function(res) {},
					complete: function(res) {}
				});
			},

			changeSecond() {
				that.codeText = 60
				var timer = setInterval(() => {
					if (that.codeText > 0) {
						that.codeText -= 1
					} else {
						clearInterval(timer);
						that.codeText = "发送验证码"
					}
				}, 1000);
			},

		}
	}
</script>

<style scoped>
</style>